<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆注册</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
<div class="shell">
    {#    <!-- Flash 消息容器 -->#}
    {#    <div id="flash-container" class="flash-messages">#}
    {#        {% with messages = get_flashed_messages(with_categories=true) %}#}
    {#            {% if messages %}#}
    {#                {% for category, message in messages %}#}
    {#                    <div class="flash-message {{ category }}">{{ message }}</div>#}
    {#                {% endfor %}#}
    {#            {% endif %}#}
    {#        {% endwith %}#}
    {#    </div>#}

    <!-- 登录表单 -->
    <div class="container a-container" id="a-container">
        <form action="{{ url_for('login') }}" method="POST" class="form" id="a-form">
            <h2 class="form_title title">登入账号</h2>
            <input type="text" name="user_id" class="form_input" placeholder="账号" required>
            <input type="password" name="password" class="form_input" placeholder="密码" required>
            <button type="submit" class="form_button button submit">登 录</button>
        </form>
    </div>

    <!-- 注册表单 -->
    <div class="container b-container" id="b-container">
        <form action="{{ url_for('register') }}" method="POST" class="form" id="b-form">
            <h2 class="form_title title">注册账号</h2>
            <input type="text" name="user_id" class="form_input" placeholder="账号" required>
            <input type="password" name="password" class="form_input" placeholder="密码" required>
            <input type="password" name="confirm_password" class="form_input" placeholder="确认密码" required>
            <button type="submit" class="form_button button submit">注 册</button>
        </form>
    </div>


    <div class="switch" id="switch-cnt">
        <div class="switch_circle"></div>
        <div class="switch_circle switch_circle-t"></div>
        <div class="switch_container" id="switch-c1">
            <h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend！</h2>
            <p class="switch_description description">去注册一个账号，让我们踏入奇妙的旅途！</p>
            <button class="switch_button button switch-btn">注 册</button>
        </div>

        <div class="switch_container is-hidden" id="switch-c2">
            <h2 class="switch_title title" style="letter-spacing: 0;">Welcome Back！</h2>
            <p class="switch_description description">已经有账号了嘛，去登入账号来进入奇妙世界吧！</p>
            <button class="switch_button button switch-btn">登 录</button>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>

</html>
